<template>
  <div>
    <div class="weGame-title">游戏专区</div>
    <div class="weGame-area">
      <div class="weGame-area-item" :key="item.item_id" v-for="(item) in list">
        <img :src="item.bg_url" alt="">
        <div class="weGame-area-item-title">
          <div>{{item.data_name.split('-')[0]}}</div>
          <div>{{item.subtitle}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGameArea } from "@/server/api";
import { defineComponent, onMounted, reactive } from "vue";
export default defineComponent({
  setup() {
    const list = reactive([]);
    const getList = async () => {
      const data = await getGameArea();
      const banner = data.items.slice(0, 3);
      list.push(...banner);
    };

    onMounted(async () => {
      await getList();
    });

    return {
      list,
    };
  },
});
</script>

<style scoped lang="less">
.weGame-area {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  align-items: center;
  &-item {
    position: relative;
    &::before {
      position: absolute;
      left: 0;
      content: "";
      width: 5px;
      height: 20px;
      background-color: #ffc107;
      top:30%;
    }
    &-title {
      position: absolute;
      top: 30%;
      left: 20px;
      & > div:first-child {
        font-size: 18px;
        font-weight: 400;
        margin: 0 0 5px;
        font-weight: 700;
        color: white;
      }
      & > div:last-child {
        font-size: 14px;
        color: white;
        opacity: 0.8;
      }
    }
  }
}
</style>